<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>     
            div{
                width:200px;height:150px;
                border:1px solid red;
                display:inline-block;  /* 以行内块元素的形式,显示 */
            }
            span{
                width:200px;height:150px;
                border:1px solid green;
                display:inline-block;  /* 以行内块元素的形式,显示 */
            }
        </style>
    </head>
    <body>
        <h2>两个无意义的标签:div和span</h2>
        <!--
            div
            默认,宽度100%,高度0  独占一行
            高度可以被内容撑开
            设置宽高之后,依然独占一行
            称为 块级元素
            
            span
            默认,宽高为0
            宽高可以被内容撑开,
            设置宽高,无效
            可以并排显示
            称为 行级元素
            
            display属性 有三个值
                 block   块级元素
                 inline  行级元素
                 inline-block 行内块元素
        -->
        <div>德玛西亚的意志</div><div
        >德玛西亚的意志</div>
        <span>迎接审判吧</span>
        <span>刻不容缓</span>
    </body>
</html>